<template>
	<view class="pageview">
		<view class="pageview-head">
			<image src="../../static/tabimg/resignlogo.png" class="login"></image>
			<view class="title">热轧智联工厂</view>
		</view>
		<view class="inputbox">
			<form>
				<view class="form-item">
					<input class="uni-input" name="account" v-model="account" type="text" placeholder="登录名称" placeholder-class="deng"/>
				</view>
				<view class="form-item">
					<input class="uni-input" name="password" v-model="password" password="true" type="text" placeholder="登录密码" placeholder-class="deng"/>
				</view>
				<button class="form-item sign" @tap="bindLogin" hover-class="clickbtn">登录</button>
			</form>
			<view class="loginBtn">
				<view class="pass">忘记密码</view>
				<view class="line"></view>
				<view class="pass">立即注册</view>
			</view>
		</view>
		<!-- <view class="pageview-btn">
			联系热线<text class="colon">:</text>400-0000-0000
		</view> -->
		<!-- #ifdef APP-PLUS -->
		<view class="pageview-btn">
			当前版本：{{version}}
		</view>
		<!-- #endif -->
		
		<!-- 设置ID弹窗 -->
		<view class="cu-modal" :class="modalName=='IP'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="padding-sm">
					<input placeholder="请输入IP地址" @input="onKeyInput" maxlength="50"/>
				</view>
				<view class="padding-lr-20 font-size22 text-left text-red">{{ipTip}}</view>
				<view class="solid-top">
					<view class="text-blue sendIpBtn" @tap="submit">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post } from "../../lib/Util.js";
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				version: '',
				account: '',
				password: '',
				modalName: null,
				ipInfo: '',
				ipTip: 'IP格式如:http://255.255.255.255:8080/'
			}
		},
		computed: mapState(['forcedLogin']),
		methods: {
			...mapMutations(['login']),
			async bindLogin() {
				var cid = ''
				// #ifdef APP-PLUS
				var pinf = plus.push.getClientInfo();
				cid = pinf.clientid; //客户端标识
				// #endif
				const data = {
					username: this.account,
					password: this.password,
					clientId: cid || 111
				};
				console.log('data===', data)
				if(!this.account || !this.password){
					uni.showToast({
						icon: 'none',
						title: '请输入账号密码'
					});
					return;
				}
				let user = /^[a-zA-Z0-9]{2,8}$/
				if (!user.test(this.account)) {
					uni.showToast({
						icon: 'none',
						title: '仅支持数字字母且位数为5-8位'
					});
					return;
				}
				if (!user.test(this.password)) {
					uni.showToast({
						icon: 'none',
						title: '仅支持数字字母且位数为5-8位'
					});
					return;
				}
				let res =await post("/app/login", data);
				if(res.code === 0){
						this.login(res);
						this.toMain(this.account);
				}else{
					uni.showToast({
						icon: 'none',
						title: '密码或账号不正确'
					});
				}
			},
			toMain(userName) {
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '../home/index',
					});
				} else {
					uni.navigateBack();
				}
			},
			submit() {
				this.modalName = null
			},
			onKeyInput: function(event) {
				this.ipInfo = event.target.value
			}

		},
		onLoad() {
			var self = this
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
				self.version = wgtinfo.version
			})
			// #endif
			
		}
	}
</script>

<style scoped>
	.pageview{
		background: linear-gradient(to bottom right, #1687ff , #2e58ec);
		height: 100vh;
		width: 100%;
		overflow: hidden;
		font-size: 24rpx;
		color: white;
		letter-spacing: 2rpx;
	}
	.pageview-head{
		margin-top: 30%;
	}
	.pageview-head .login{
		margin-left: 308rpx;
		height: 133rpx;
		width: 133rpx;
		margin-bottom: 27rpx;
	}
	.title {
		text-align: center;
		font-size: 40rpx;
		width: 100%;
		color: #FFFFFF;
		font-family: PingFangSC-Semibold, sans-serif;
	}
	.inputbox{
		margin-top: 100rpx;
	}
	.form-item {
		margin: 0 25rpx 27rpx 25rpx;
		overflow: hidden;
		border-radius: 40rpx;
		width: 700rpx;
		height: 80rpx;
		background: #5794f7;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		color: white;
	}
	.uni-input {
		width: 100%;
		box-sizing: border-box;
		color: white;
		font-size: 24rpx;
		height: 40rpx;
	}
	.uni-input-placeholder{
		color: #000000;
	}
	.uni-input-input{
		color: white;
	}
	.sign{
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, sans-serif;
		border: 0;
		text-align: center;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 54rpx;
		margin-bottom: 54rpx;
	}
	.deng{
		color: white;
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 24rpx;
	}
	.clickbtn{
		background: #0054ad;
	}
	.loginBtn{
		display: flex;
		justify-content: center;
	}
	.line{
		width: 2rpx;
		height: 30rpx;
		background: #2555B4;
		margin: 0 37rpx;
	}
	.pageview-btn{
		font-size: 20rpx;
		margin-top: 331rpx;
		text-align: center;
		font-family: PingFangSC-Regular, sans-serif;
	}
	.colon{
		margin: 0 10rpx 0 5rpx;
	}
	.pass{
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 24rpx;
	},
	.sendIpBtn {
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		font-size: 35upx;
		font-weight: 700;
	}
</style>
